/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.navbar-collapse { margin-left: -15px; margin-right: -15px; padding: 0 15px; background: rgba(255,255,255,1); z-index: 9999; }
.navbar-toggler:focus, .navbar-toggler:hover { margin: 16px 0;}

.banner-text { position: absolute; z-index: 1; width: 100%; padding: 30px;  }
.banner-text h1 { color: #fff; font-size: 2rem; font-weight: 900; font-family:"Raleway", sans-serif; line-height: 1rem;  }

section { padding: 15px; }
.btns a { width: 95%; text-align: center; }
.p-fluid { padding-right: 15px; padding-left: 15px; }

  .navbar-brand {margin:0 0 0 10%;}
.navbar-brand img { height: 60px;  } 
  
/* .owl-nav { position: absolute; z-index: 1; top:-0px; left: 5%; right: 5%;   }
.owl-nav { position: absolute; z-index: 9; top:-0px; left: 5%; right: 5%;   } */

.product-detail { padding: 5% 0; }
.product-detail .form-check-label { margin: 6px 0 0 30px; line-height: 15px;width: 45%;}
.product-detail .sub-div { line-height: 28px; }
  
  .btn { padding: 8px 7%;}
  .btn-white { margin:0 3% 0 0;}
  .shopify-payment-button .shopify-payment-button__button--unbranded { padding:1em 1.5em;}
  
  
  .bgfruts .align-middle { padding:0px;}

  .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next { top:50px; }
  
  .six-reasons .nav-item { margin:0px; width:50%; text-align: center; }
  .brands_slider_container { padding-left: 0px; padding-right: 0px; }
  
  #quantity { width:15%; margin-right:10px; }
  #adcart { margin-right:10px; }
  .slideInRight { padding-left:0px; padding-right:0px; }
  
  #custCarousel .carousel-indicators { z-index:1; }
  
  .testim .cont > div.inactive { padding:30px 0; }
  
  .testim .cont div.active .img img { margin-bottom:30px; }
  
  .testim .cont div.active p, .testim .cont div.active .h4 { float:left; width:100%; }
  
  .log .gummy2 { right:-15px; bottom:30px;}
  
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .navbar-collapse { margin-left: -15px; margin-right: -15px; padding: 0 15px; background: rgba(255,255,255,1); z-index: 9999; }
  .navbar-toggler:focus, .navbar-toggler:hover { margin: 16px 0;}

.banner-text { position: absolute; z-index: 1; width: 100%; padding: 30px;  }
.banner-text h1 { color: #fff; font-size: 3.5rem; font-weight: 900; font-family:"Raleway", sans-serif; line-height: 2.5rem;  }

.owl-nav { position: absolute; z-index: 1; top:-50px; left: 5%; right: 5%;   }
}

/* Extra small devices (phones, 768px and down) */
@media only screen and (max-width: 768px) {
.btns a { width: 95%; text-align: center; }
.p-fluid { padding-right: 15px; padding-left: 15px; }
.owl-nav { position: absolute; z-index: 9; top:-80px; left: 5%; right: 5%;   }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .navbar-collapse { margin-left: -15px; margin-right: -15px; padding: 0 15px; background: rgba(255,255,255,1); z-index: 9999; }
 
 .banner-text { position: absolute; z-index: 1; width: 100%; padding-top: 30px; }
.banner-text h1 { color: #fff; font-size: 4rem; font-weight: 900; font-family:"Raleway", sans-serif; line-height: 3rem;  }
.owl-nav { position: absolute; z-index: 9; top:-80px; left: 25%; right: 25%;   }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   .navbar-collapse {background: rgba(255,255,255,0);}
   .top-tabs { width: 50%;}
   .p-fluid { padding-left:10%; padding-right:10%;  }

} 

/* Extra small devices (phones, 1024px and down) */
@media only screen and (max-width: 1024px) {
.testimonials-wrap .pro-item { margin-bottom: 150px; }    
.testimonials-wrap .pro-btn { padding-top: 25px; }
.testimonials-wrap .pro-btn a { width: 95%; margin: 5px; }
.owl-nav { position: absolute; z-index: 9; top:-80px; left: 5%; right: 5%;   }

.product-detail { padding: 5% 0; }
.product-detail .form-check-label { margin: 6px 0 0 30px; line-height: 15px;width: 45%;}
.product-detail .sub-div { line-height: 28px; }

  .pro-btn .btn-white { padding:5px 5%; }
  .shopify-payment-button .shopify-payment-button__button--unbranded { padding:1em;}
  
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1180px) {
  .navbar-collapse { background: rgba(255,255,255,0);}
  
.top-tabs { width: 50%;}
.banner-text { position: absolute; z-index: 1; width: 100%; padding:30px 10% 0 10%; }
.banner-text h1 { color: #fff; font-size: 130px; font-weight: 900; font-family:"Raleway", sans-serif; line-height: 5.5rem;  }
 .owl-nav { position: absolute; z-index: 9; top:-80px; left: 25%; right: 25%;   }

.product-detail { padding: 5% 0; }
.product-detail .form-check-label { margin: 6px 0 0 30px; line-height: 15px;width: 45%;}
.product-detail .sub-div { line-height: 28px; }

#custCarousel .carousel-indicators {position: absolute; bottom: -80px; z-index: 5;}

}

@media only screen and (min-width: 1300px) {
.banner-text { position: absolute; z-index: 1; width: 100%; padding:30px 13% 0 13%; }
.banner-text h1 { color: #fff; font-size: 125px; font-weight: 900; font-family:"Raleway", sans-serif; line-height: 6rem;  }

#custCarousel .carousel-indicators {position: absolute; bottom: -65px; z-index: 5;}

.product-detail { padding:0% 20% 0 15px ; }

}

/* wow carousel ============================================================================================================ */


#custCarousel { padding: 12% 0; }

.owl-carousel .owl-nav .owl-prev { margin-left: -20px; left: 0; position: absolute; }
.owl-carousel .owl-nav .owl-next { margin-right: -20px; right: 0; position: absolute;  }

 #detail.table thead th, #detail.table td, #detail.table th {
    border: none !important;
    padding: 5px;
}

/* testimonial sliders =============================================================================== */



.testimonial-section2{
  /*height: 600px;*/
  position: relative;
  padding: 50px 15px;
  
}

.testim .wrap {
    position: relative;
    width: 100%;
    max-width: 1020px;
    padding: 40px 20px;
    margin: 50px auto 50px auto;
    border: solid 2px #96BB00;
}

.testim .arrow {
    display: block;
    position: absolute;
    color: #eee;
    cursor: pointer;
    font-size: 2em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .3s ease-in-out;    
    -ms-transition: all .3s ease-in-out;    
    -moz-transition: all .3s ease-in-out;    
    -o-transition: all .3s ease-in-out;    
    transition: all .3s ease-in-out;
    padding: 5px;
    z-index: 22222222;
}

.testim .arrow:before {
    cursor: pointer;
}

.testim .arrow:hover {
    color: #2b288d;
}
    

.testim .arrow.left {
    left: 10px;
}

.testim .arrow.right {
    right: 10px;
}

.testim .dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: -50px;
    left: 0;
    display: block;
    z-index: 3333;
    height: 12px;
}

.testim .dots .dot {
    list-style-type: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 0%;
    background: #CED3A8;
    margin: 0 10px;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out;    
    -ms-transition: all .5s ease-in-out;    
    -moz-transition: all .5s ease-in-out;    
    -o-transition: all .5s ease-in-out;    
    transition: all .5s ease-in-out;
    position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
    background: #B9CD2A;
    border-color: #B9CD2A;
}

.testim .dots .dot.active {
    -webkit-animation: testim-scale .5s ease-in-out forwards;   
    -moz-animation: testim-scale .5s ease-in-out forwards;   
    -ms-animation: testim-scale .5s ease-in-out forwards;   
    -o-animation: testim-scale .5s ease-in-out forwards;   
    animation: testim-scale .5s ease-in-out forwards;   
}
    
.testim .cont {
    position: relative;
    overflow: hidden;
}

.testim .cont > div {
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
    opacity: 0;
animation: color_change 1s;
}

.testim .cont > div.inactive {
    opacity: 1;
}
    

.testim .cont > div.active {
    position: relative;
    opacity: 1;
}
    

.testim .cont div .img img {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 20px 0 0;
    border-radius: 50%;
    float: left; ma
}

.testim .cont div .h4 {
    color: #506207;
    font-size: 1.2em;
    margin: 15px 0;
}

.testim .cont div p {
    font-size: 1.15em;
    color: #506207;
    width: 80%;
    margin: auto;
}

.testim .cont div.active .img img {
    -webkit-animation: testim-show .5s ease-in-out forwards;            
    -moz-animation: testim-show .5s ease-in-out forwards;            
    -ms-animation: testim-show .5s ease-in-out forwards;            
    -o-animation: testim-show .5s ease-in-out forwards;            
    animation: testim-show .5s ease-in-out forwards;            
}

.testim .cont div.active .h4 {
    -webkit-animation: testim-content-in .4s ease-in-out forwards;    
    -moz-animation: testim-content-in .4s ease-in-out forwards;    
    -ms-animation: testim-content-in .4s ease-in-out forwards;    
    -o-animation: testim-content-in .4s ease-in-out forwards;    
    animation: testim-content-in .4s ease-in-out forwards;    
}

.testim .cont div.active p {
    -webkit-animation: testim-content-in .5s ease-in-out forwards;    
    -moz-animation: testim-content-in .5s ease-in-out forwards;    
    -ms-animation: testim-content-in .5s ease-in-out forwards;    
    -o-animation: testim-content-in .5s ease-in-out forwards;    
    animation: testim-content-in .5s ease-in-out forwards;    
}

.testim .cont div.inactive .img img {
    -webkit-animation: testim-hide .5s ease-in-out forwards;            
    -moz-animation: testim-hide .5s ease-in-out forwards;            
    -ms-animation: testim-hide .5s ease-in-out forwards;            
    -o-animation: testim-hide .5s ease-in-out forwards;            
    animation: testim-hide .5s ease-in-out forwards;            
}

.testim .cont div.inactive .h4 {
    -webkit-animation: testim-content-out .4s ease-in-out forwards;        
    -moz-animation: testim-content-out .4s ease-in-out forwards;        
    -ms-animation: testim-content-out .4s ease-in-out forwards;        
    -o-animation: testim-content-out .4s ease-in-out forwards;        
    animation: testim-content-out .4s ease-in-out forwards;        
}

.testim .cont div.inactive p {
    -webkit-animation: testim-content-out .5s ease-in-out forwards;    
    -moz-animation: testim-content-out .5s ease-in-out forwards;    
    -ms-animation: testim-content-out .5s ease-in-out forwards;    
    -o-animation: testim-content-out .5s ease-in-out forwards;    
    animation: testim-content-out .5s ease-in-out forwards;    
}

@-webkit-keyframes testim-scale {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -webkit-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -webkit-box-shadow: 0px 0px 10px 5px #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 0px #ea830e;        
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@-moz-keyframes testim-scale {
    0% {
        -moz-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -moz-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -moz-box-shadow: 0px 0px 10px 5px #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        -moz-box-shadow: 0px 0px 0px 0px #ea830e;        
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@-ms-keyframes testim-scale {
    0% {
        -ms-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -ms-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -ms-box-shadow: 0px 0px 10px 5px #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        -ms-box-shadow: 0px 0px 0px 0px #ea830e;        
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@-o-keyframes testim-scale {
    0% {
        -o-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -o-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -o-box-shadow: 0px 0px 10px 5px #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        -o-box-shadow: 0px 0px 0px 0px #ea830e;        
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@keyframes testim-scale {
    0% {
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@-webkit-keyframes testim-content-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -webkit-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-moz-keyframes testim-content-in {
    from {
        opacity: 0;
        -moz-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -moz-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-ms-keyframes testim-content-in {
    from {
        opacity: 0;
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -ms-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-o-keyframes testim-content-in {
    from {
        opacity: 0;
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -o-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);        
    }
}

@-webkit-keyframes testim-content-out {
    from {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -webkit-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-moz-keyframes testim-content-out {
    from {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -moz-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-ms-keyframes testim-content-out {
    from {
        opacity: 1;
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -ms-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-o-keyframes testim-content-out {
    from {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
    }
}

@-webkit-keyframes testim-show {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
}

@-moz-keyframes testim-show {
    from {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
}

@-ms-keyframes testim-show {
    from {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
}

@-o-keyframes testim-show {
    from {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
}

@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        transform: scale(1);       
    }
}

@-webkit-keyframes testim-hide {
    from {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@-moz-keyframes testim-hide {
    from {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

@-ms-keyframes testim-hide {
    from {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
}

@-o-keyframes testim-hide {
    from {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        transform: scale(0);
    }
}

@media all and (max-width: 300px) {
  body {
    font-size: 14px;
  }
}

@media all and (max-width: 500px) {
  .testim .arrow {
    font-size: 1.5em;
  }
  
  .testim .cont div p {
    line-height: 25px;
  }

}



